<script setup>
import authService from '@/services/auth.service';
import { AxiosError } from 'axios';
import { onMounted, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElForm, ElFormItem, ElInput, ElButton, ElCheckbox, ElDatePicker, ElContainer, ElMain, ElSteps, ElStep } from 'element-plus';

/**
 * 忘记密码页
 * todo: 样式、表单校验完善，变量、方法命名完善
 */
const router = useRouter();
const route = useRoute();

const loading = ref(false);

const entity = ref({});
const active = ref(0);

const load = async () => {
    const routeUsername = route.query.username;
    if (routeUsername) {
        entity.value.username = routeUsername;
    }
};

const nextStep = async () => {
    if (active.value == 0) {
        await checkUsername();
    } else if (active.value == 1) {
        await checkMainInfo();
    } else if (active.value == 2) {
        await resetPassword();
    }
};

const checkUsername = async () => {
    try {
        loading.value = true;
        if (!entity.value.username) {
            ElMessage({ message: "请输入用户名", type: "error" });
            return;
        }

        const res = await authService.checkUsernameBeforeResetPassword(entity.value.username);
        if (!res.data.data) {
            active.value++;
        } else {
            ElMessage({ message: "用户名不存在", type: "error" });
        }
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        loading.value = false;
    }
}

const checkMainInfo = async () => {
    try {
        loading.value = true;
        if (!entity.value.phone) {
            ElMessage({ message: "请输入手机号", type: "error" });
            return;
        }
        if (!entity.value.realName) {
            ElMessage({ message: "请输入真实姓名", type: "error" });
            return;
        }

        const res = await authService.checkMainInfoBeforeReset(entity.value);
        if (res.data.data == true) {
            active.value++;
        } else {
            ElMessage({ message: "信息校验不通过", type: "error" });
        }
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        loading.value = false;
    }
}

const resetPassword = async () => {
    try {
        loading.value = true;
        if (!entity.value.newPwd) {
            ElMessage({ message: "请输入新密码", type: "error" });
            return;
        }
        if (!entity.value.confirmPwd) {
            ElMessage({ message: "请输入确认密码", type: "error" });
            return;
        }
        if (entity.value.newPwd != entity.value.confirmPwd) {
            ElMessage({ message: "两次密码输入不一致", type: "error" });
            return;
        }

        await authService.resetPassword(entity.value);
        ElMessage({ message: "密码重置成功，请重新登录", type: "success" });
        router.push("/login");
    } catch (err) {
        if (err instanceof AxiosError) {
            const msg = err.response?.data?.message || err.message;
            ElMessage({ message: msg, type: "error" });
        }
        throw err;
    } finally {
        loading.value = false;
    }
}

onMounted(async () => {
    await load();
});
</script>

<template>
    <div class="h-full w-full">
        <ElContainer class="flex justify-center">
            <ElMain class="" style="max-width: 460px;">
                <h3 class="text-center">重置密码</h3>
                <ElSteps :active="active" finish-status="success">
                    <ElStep title="步骤一"></ElStep>
                    <ElStep title="步骤二"></ElStep>
                    <ElStep title="步骤三"></ElStep>
                </ElSteps>

                <ElContainer v-loading="loading">
                    <ElMain>
                        <ElForm label-width="5rem">
                            <template v-if="active == 0">
                                <ElFormItem label="用户名">
                                    <ElInput v-model:model-value="entity.username" />
                                </ElFormItem>
                            </template>
                            <template v-if="active == 1">
                                <ElFormItem label="手机号">
                                    <ElInput v-model:model-value="entity.phone" />
                                </ElFormItem>
                                <ElFormItem label="真实姓名">
                                    <ElInput v-model:model-value="entity.realName" />
                                </ElFormItem>
                            </template>
                            <template v-if="active == 2">
                                <ElFormItem label="新密码">
                                    <ElInput clearable show-password v-model="entity.newPwd" />
                                </ElFormItem>

                                <ElFormItem label="确认密码">
                                    <ElInput clearable show-password v-model="entity.confirmPwd" />
                                </ElFormItem>
                            </template>
                            <ElFormItem>
                                <div class="w-full flex justify-center">
                                    <ElButton @click="nextStep()">{{ active < 2 ? '下一步' : '完成' }}</ElButton>
                                </div>
                            </ElFormItem>
                        </ElForm>
                    </ElMain>
                </ElContainer>


            </ElMain>
        </ElContainer>
    </div>
</template>